import React, { Component } from 'react'
import { reqcartadd, reqgetgoodsinfo } from '../../http/api'
import Header from '../../components/Header/Header'
import { $pre } from "../../http/http"
import "./detail.less"
import { Toast ,Button} from 'antd-mobile'


export default class detail extends Component {
  constructor() {
    super()
    this.state = {
      arr: []
    }
  }

  async componentDidMount() {
    let r = this.props.match.params;
    let res = await reqgetgoodsinfo(r);
    this.setState({
      arr: res.data.list[0]
    })
  }

  async addShop(){
    let res=await reqcartadd({
      uid:JSON.parse(sessionStorage.getItem("userInfo")).uid,
      goodsid:this.props.match.params.id,
      num:1,
      type:1
    })
    if(res.data.code===200){
      Toast.show({content:res.data.msg})
    }
  }

  render() {
    let { arr } = this.state
    // console.log(arr);
    return (
      <div className='detail'>
        <Header back title="商品详情"></Header>
        <div>
          <img className='img' src={$pre+arr.img} alt="" />
           <span style={{color:"orangered",fontSize:"30px"}}>{"¥"+arr.price}</span>
           <span style={{textDecoration:"line-through",fontSize:"22px",color:"#ccc"}}>{"¥"+arr.market_price}</span>
           <p>{arr.goodsname}</p>
        </div>
        <Button color="danger" onClick={()=>this.addShop()}>加入购物车</Button>
      </div>
    ) 
  }
}
